<template>
	<view>
		<!-- 头部 -->
		<view-logo></view-logo>
		<view class="banner">
			<image :src="banner" mode="widthFix"></image>
		</view>

		<!-- 关于 -->
		<view class="kuang">
			<view class="index-about qj-tit">
				<view class="left">
					<view class="xian">

					</view>
					{{content1.title}}
				</view>
				<view class="right" @click="toMore('/pages/about/index')">
					了解更多 <image src="/static/images/more.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="viee">
				<view class="imga">
					<image mode="widthFix" :src="content1.image"></image>
				</view>

				<view class="wenana" v-html="content1.articleData.content">
					<!-- 					<view>
						百果园，全称深圳百果园实业(集团)股份有限公司，是一家集水果采购、种植技术支持、采后保鲜、物流仓储、标准分级、营销拓展、品牌运营、门店零售、信息科技、金融资本、科研教育于一体的大型连锁企业。
					</view>
					<view>百果园，专研水果22年，精选全球品质水果，26国直采近千种好果。
					</view>
					<view>百果园引领行业革新，开创水果专营连锁模式先河，6000家门店见证了百果园的成就，对品质的执着造就了连续10年的销量第一。
					</view> -->
				</view>
			</view>

		</view>


		<!-- 招商加盟 -->
		<view class="kuang">
			<view class="index-about qj-tit">
				<view class="left">
					<view class="xian">

					</view>
					{{titleb}}
				</view>
				<view class="right"  @click="toMore('/pages/user/index')">
					了解更多 <image src="/static/images/more.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="viee zhaoshang" v-if="content2.articleData && content2.articleData.content">
				<view class="zsa">

					<view class="juli">
						<u-parse :content="content2.articleData.content"></u-parse>
						<!-- <view class="wenzi">
							<title>做有情感的水果人 · 开有温度的水果店</title>
							<view class="ans">
								· 百果园加盟政策在业界内被誉为“福利特许加盟”制<br>
								· 秉承着与加盟商构建“事业共同体”的理念<br>
								· 寻找认可百果园集团文化理念、经营模式<br>
								的加盟商组成命运共同体
								· 一起事业共进，携手共赢
							</view>
						</view> -->
					</view>
					<image :src="content2.image" mode="widthFix"></image>
				</view>
				<view class="zsa zsb">
					<image :src="content3.image" mode="widthFix"></image>
					<view class="juli">
						<u-parse :content="content3.articleData.content"></u-parse>
						<!-- <view class="wenzi">
							<title>百果园与加盟商 · 事业共同体</title>
							<view class="ans">
								· 加盟商：专注于店铺经营、销售<br>
								· 总部：加盟店经营、管理支持<br>
								· 百果园和加盟店信赖关系的基础<br>
								· 总部赋能加盟商，加盟店用心经营顾客
							</view>
						</view> -->
					</view>
				</view>

			</view>

			<view class="kuang kuang2">

				<view class="fenlei">
					<view class="fenlei-ll" @click="toNav(item)" v-for="(item,index) in content4" :class="'fenlei-ll'+index">
						<view class="yuan1">

						</view>
						<view class="yuan2">

						</view>
						<view class="lie">
							<title class="title">{{item.title}}</title>
							{{item.description}}
						</view>

						<image :src="item.image" mode="widthFix"></image>
					</view>
				</view>
			</view>


		</view>

		<view-dibu></view-dibu>
		<view class="diwa">
			<u-parse :content="showTips.content"></u-parse>
			<!-- <text>
				*投资有风险，入行需谨慎</text> -->
		</view>

		<view-fudong></view-fudong>

		<view-tabbar :current="0"></view-tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/tabbar.vue'
	import logo from '@/components/logo.vue'
	import dibu from '@/components/dibu.vue'
	import fudong from '@/components/fudong.vue'
	import {
		apiBaseUrl
	} from '@/config/config.js'
	export default {

		data() {
			return {
				banner: '/static/banner.png',
				content1: {},
				content2: {},
				content3: {},
				showTips:'',
				content4: {},
				titlea: '关于百果园',
				titleb: '招商加盟',
				apiBaseUrl,
				imga: '/static/img1.png',
				lise: [{
						color: '#00943a',
						background: 'linear-gradient(#e6f5ec, #f8f8fe)',
						img: '/static/images/tb1.png',
						tit: '申请加盟',
						jc: '提交申请资料'
					},
					{
						color: '#ff9faa',
						background: 'linear-gradient(#ffecee, #f8f8fe)',
						img: '/static/images/tb2.png',
						tit: '进驻城市',
						jc: '开放加盟城市'
					},
					{
						color: '#ff8e1d',
						background: 'linear-gradient(#f8f1ea, #f8f8fe)',
						img: '/static/images/tb3.png',
						tit: '问题答疑',
						jc: '热门咨询答疑'
					},
					{
						color: '#6b4739',
						background: 'linear-gradient(#eeeae8, #f8f8fe)',
						img: '/static/images/tb4.png',
						tit: '联系客服',
						jc: '在线客服咨询'
					},
				],
			}
		},
		components: {
			'view-tabbar': Tabbar,
			'view-logo': logo,
			'view-dibu': dibu,
			'view-fudong': fudong,
		},
		onShareAppMessage() {},
		onShareTimeline() {},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
			this.initData()
		},
		onLoad(option) {
			console.log(option);
		},
		methods: {
			
			toNav(item){
				if(item.href.indexOf('http') > -1){
					uni.navigateTo({
						url: `/pages/webview/index?src=${encodeURIComponent(item.href)}`
					})
				}else{
					uni.switchTab({
						url:'/pages/zixun/index'
					})
				}
			},
			initData() {

				this.$api.category_list_data({
					siteCode: 'main',
					categoryCode: 1001
				}, res => {
					if (res.code == 200) {
						this.showTips = res.data
					}
				})
				this.$api.article_list_data({
					siteCode: 'main',
					categoryCode: 1001001
				}, res => {
					if (res.code == 200) {
						this.banner = res.data.list[0].sjImage
					}
				})
				this.$api.article_list_data({
					siteCode: 'main',
					categoryCode: 1001002
				}, res => {
					if (res.code == 200) {
						this.content1 = res.data.list[0]
					}
				})
				this.$api.article_list_data({
					siteCode: 'main',
					categoryCode: 1001003
				}, res => {
					if (res.code == 200) {
						this.content2 = res.data.list[0]
						this.content3 = res.data.list[1]
					}
				})
				this.$api.article_list_data({
					siteCode: 'main',
					categoryCode: 1001004
				}, res => {
					if (res.code == 200) {
						this.content4 = res.data.list
					}
				})

			},
			toMore(url) {
				uni.switchTab({
					url
				})
			},
			more() {
				uni.switchTab({
					url: '' //关于百果园more跳转
				})
			}
		}
	}
</script>

<style lang="scss">
	.banner {
		border-radius: 30rpx;
		overflow: hidden;

		image {
			width: 100% !important;
		}

	}



	.kuang {
		padding: 50rpx 30rpx 0;

		.viee {
			background-color: #fff;
			border-radius: 30rpx;
			overflow: hidden;

			.wenana {
				padding: 30rpx 40rpx;
				font-size: 26rpx;
				line-height: 1.5;

				.p {
					margin-bottom: 24rpx;
				}
			}
		}

		.qj-tit {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 26rpx;

			.left {
				width: 60%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #00943a;
				font-size: 36rpx;
				font-weight: 600;

				.xian {
					width: 8rpx;
					height: 40rpx;
					margin-right: 20rpx;
					background-color: #ff9faa;
					border-radius: 10rpx;
				}
			}

			.right {
				width: 40%;
				display: flex;
				justify-content: flex-end;
				color: #00943a;
				font-size: 25rpx;
				align-items: center;

				image {
					width: 10rpx;
					margin-left: 20rpx;
				}
			}


		}

		.imga {
			border-radius: 30rpx;
			overflow: hidden;

			image {
				width: 100% !important;
			}
		}
	}


	.kuang2 {
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 60rpx;
	}

	.zhaoshang {
		padding:50rpx 30rpx 54rpx;

		.title {
			display: block !important;
			margin-bottom: 26rpx;
			font-size: 30rpx;
			color: #00943a;
			font-weight: bold;
		}

		.ans {
			display: block;
			font-size: 22rpx;
			color: #222222;
		}

		.juli {
			display: flex;
			align-items: flex-end;
			clear: both;
			// width: 100%;

			.wenzi {
				font-size: 26rpx;
				width: 100%;
				line-height: 1.8;
				position: relative;


			}


		}
	}

	.zsa {
		position: relative;

		image {
			width: 250rpx;
			position: absolute;
			top: 140rpx;
			right: 0;

		}
	}

	.zsb {
		padding-top: 100rpx;
		.juli {
			float: right;
		}
		image {
			width: 230rpx;
			left: 0;
			top: 90rpx;
		}
	}

	.fenlei {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;

		.fenlei-ll {
			margin-bottom: 20rpx;
			width: 42%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			position: relative;

			.yuan1 {
				position: absolute;
				width: 30%;
				height: 90%;
				border-radius: 50%;
				background-color: #ffffff47;
				right: -4%;
				top: -1%;
				z-index: 0;
			}

			.yuan2 {
				position: absolute;
				width: 30%;
				height: 90%;
				border-radius: 50%;
				background-color: #ffffff47;
				left: -4%;
				top: -1%;
				z-index: 0;
			}

			.lie {
				font-size: 26rpx;
				color: #555555;
				position: relative;
				z-index: 1;

				title {
					font-size:28rpx;
					width: 100%;
					font-weight: bold;
					line-height: 1.6;
					margin-bottom: 2px;
					display: block;
				}

			}

			image {
				width: 50rpx;
			}

			&.fenlei-ll0 {
				background: linear-gradient(#e6f5ec, #f8f8fe);

				.title {
					color: #00943a

				}
			}

			&.fenlei-ll1 {
				background: linear-gradient(#ffecee, #f8f8fe);

				.title {
					color: #ff9faa

				}
			}

			&.fenlei-ll2 {
				background: linear-gradient(#f8f1ea, #f8f8fe);

				.title {
					color: #ff8e1d

				}
			}

			&.fenlei-ll3 {
				background: linear-gradient(#eeeae8, #f8f8fe);

				.title {
					color: #6b4739

				}
			}
		}





	}

	.diwa {
		text-align: center;
		margin-top: 20rpx;

		.text {
			border-radius: 50rpx;
			background-color: #fff;
			text-align: center;
			padding: 15rpx 30rpx;
			margin: auto;
			display: inline-block;
			color: #888888;
			font-size: 25rpx;
		}
	}
</style>